<template>
	<div class="my-container">
		<!-- 未登录 -->
		<div v-if="!store.state.userInfo.wechat_id">
			<fui-avatar class="photo" @click="goLogin">
				<fui-icon class="photo-icon" name="my-fill" color="#fff"></fui-icon>
			</fui-avatar>
			<div class="text-name">未登录</div>
		</div>
		<!-- 已登录 -->
		<div v-else>
			<fui-avatar class="photo">
				<fui-icon class="photo-icon" name="my-fill" color="#fff"></fui-icon>
			</fui-avatar>
			<div class="text-name">{{ store.state.userInfo.mem_Name }}</div>
		</div>
	</div>
	<div class="my_func">
		<fui-tabs :scale="1.1" center :tabs="tabs" @change="change"></fui-tabs>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		appid,
		secret
	} from '../../config/index.js'
	import {
		loginApi,
		wzLoginApi
	} from '../../api/index.js'
	import {
		ref
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const store = useStore()
	let tabs = ref([
		'我的点赞', '我的收藏', '我的评论'
	])
	// 切换tab
	const change = () => {
		console.log(store.state.userInfo.wechat_id)
	}

	//  获取code
	const goLogin = () => {
		console.log('登录')
		uni.login({
			provider: 'weixin',
			success: async (res) => {
				// res.code 即为获取到的 code
				const result = await loginApi(proxy, {
					appid,
					secret,
					code: res.code
				})
				if (result?.statusCode == 200) {
					// 登录成功
					const {
						openid,
						session_key
					} = result.data
					const {
						data
					} = await wzLoginApi(proxy, {
						openid
					})
					if (data?.code == 200) {
						store.commit('changeUserInfo', data.data[0])
					}
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.my_func {
		width: 100%;
		height: calc(100vh - 500rpx);
		background-color: #fff;
	}

	.my-container {
		height: 500rpx;
		background: url('https://www.cat61.com/img/xcx/my_bg.png') no-repeat;
		background-size: 100% 100%;
		position: relative;

		.text-name {
			color: #333;
			text-align: center;
			padding-top: 410rpx;
		}

		.photo {
			width: 200rpx !important;
			height: 200rpx !important;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 105rpx;
			left: calc(50% - 100rpx);

			:deep(.fui-avatar__size-middle) {
				width: 170rpx !important;
				height: 170rpx !important;
			}

			.photo-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				width: 80%;
				height: 80%;

				:deep(.fui-icon) {
					font-size: 100rpx !important;
				}
			}
		}

	}
</style>